<template>
    <div id="login">
        <div class="loginBg">
            <!-- 表单内容 -->
            <div class="bgArea">
                <img src="http://bpic.588ku.com/element_origin_min_pic/18/06/10/69b90e2edb9976c093f2299d0f11c21e.jpg" alt="">
                <input type="text" placeholder="请输入账号" v-model="hsid">
                <br/>
                <div class="line"></div>
                <img src="http://bpic.588ku.com/element_origin_min_pic/18/06/10/f20f52c830d371c5fe5b717f6d2673fc.jpg" alt="">
                <input type="password" placeholder="请输入密码" v-model="hspw">
             </div> 
              <!-- 登陆按钮 -->
             <div>                 
                <mt-button type="primary" class="loginBtn" size='large' @click="loginTo">登 录</mt-button> 
             </div>
        </div>
    </div>
</template>

<script>
import 'mint-ui/lib/style.css'
import { Toast } from 'mint-ui';

  export default{
      data(){
          return {
              hsid:'',
              hspw:'',
              warnMsg:'',
          }
      },
      methods:{
          loginTo(){
              //setTimeout(()=>{this.$router.push({path:'/index'})},1000)
            var url="http://125.210.160.93:8080/SmEdu/port/admi/login";
            this.$http.post(url,{hsid:this.hsid,hspw:this.hspw}).then((res)=>{
                console.log(res);
                //仓库保存管理员用户名
                this.$store.state.loginName=res.data.body.name;
                //sessionStroage保存管理员用户名
                sessionStorage.setItem('lName',res.data.body.name);
                console.log(res.data);
                // console.log(res.data.head);
                console.log(res.data.head.desc);
                 if(res.data.head.code==100){                 
                     this.open6();
                     setTimeout(()=>{this.$router.push({path:'/index'})},1000);
                 }else{
                     this.warnMsg=res.data.head.desc;
                     this.open7();
                     return
                 } 
            }).catch((err)=>{
                console.log(err);
            })
          },
        //   登陆成功显示信息
        open6(){
            this.$message({
            showClose: true,
            message:'登陆成功',
            type: 'success',
            duration:1000,
            });
        },
        // 登陆失败显示信息
         open7(){
            this.$message({
            showClose: true,
            message: this.warnMsg,
            type: 'warning',
            duration:1000,
            });
        },

      },
      mounted(){
         
      }
  }  

</script>

<style>
    #login .loginBg{
        background:url('../assets/img/bg.jpg') no-repeat ; 
        background-position:50% 50%;
        background-size:100% 100%;
        position: relative;
        height:17.75rem;
    }
    #login .bgArea{
        height:2.4rem; 
        width:80%;  
        position: absolute;
        top:30%;
        left:10%;  
        background:#fff;
        border-radius: 0.2667rem;
    }
    #login .bgArea .line{
        width:90%;
        margin:0 auto;
        border-bottom: 1px solid black;
    }
    #login .bgArea input{
        height:40%;
        width:80%;
        border:0px solid pink;    
        margin:0.0667rem 0;
        outline:0;
        padding:0 0 0 0.1333rem;
        text-align: center;
    }
     #login .bgArea input::-webkit-input-placeholder{
         text-align:center;
     }
     #login .bgArea img{
        height:0.5333rem;
        width:0.5333rem;
        vertical-align: middle;
        border-radius: 50% 50%;
     }
       #login .loginBtn{
        position: absolute;
        top:50%;
        left:30%;
        color:#fff;
        background:#4CE39C; 
        width:40%;
        height:6%;
        font-size:0.4267rem;    
        border-radius: 0.1333rem;
      }
       
</style>

